<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易画板</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2120358_887vl6zyzvg.css">
</head>

<body class="body-x">
    <canvas id="canvas"></canvas>
    <div class="choosePanel">
        <h3>工具栏</h3>
        <div class="color">
            <label>选择颜色：
                <input type="color" id="color">
            </label>
        </div>
        <div class="lines">
            <p>选择线条：</p>
            <button class="small" id="small" data-size="2"><span></span></button>
            <button class="medium" id="medium" data-size="6"><span></span></button>
            <button class="big" id="big" data-size="10"><span></span></button>
        </div>
        <div class="shapes">
            <p>选择形状：</p>
            <button class="rect" id="rect"><span></span></button>
            <button class="arc" id="arc"><span></span></button>
            <button class="triangle" id="triangle"><i class="iconfont icon-triangle1"></i></button><br />
            <button class="triangle-90" id="triangle-90"><i class="iconfont icon-triangle2"></i></button>
        </div>
        <div class="erasers">
            <p>选择橡皮擦：</p>
            <button class="eraser bigEraser" id="bigEraser"><i class="iconfont icon-xiangpica"></i></button>
            <button class="eraser mediumEraser" id="mediumEraser"><i class="iconfont icon-xiangpica"></i></button>
            <button class="eraser smallEraser" id="smallEraser"><i class="iconfont icon-xiangpica"></i></button>
        </div>
    </div>
    <script src="./main.js"></script>
</body>

</html>